<template>
    <div class="add-admin">
        <Form ref="addForm" :model="form" :rules="diyData.rules" :label-width="100">
            <div class="tag-title">{{ query.id ? '编辑' : '添加' }}管理员</div>
            <FormItem label="管理员姓名" prop="name">
                <Input clearable  v-model="form.name" placeholder="请输入姓名" style="width: 440px"></Input>
            </FormItem>
            <FormItem label="管理员邮箱" prop="email">
                <Input clearable  v-model="form.email" placeholder="请输入邮箱" style="width: 440px"></Input>
            </FormItem>
            <FormItem label="管理员状态" prop="status">
                <RadioGroup v-model="form.status">
                    <Radio label="1">启用</Radio>
                    <Radio label="0">停用</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="角色" prop="roles">
                <Select clearable  style="width: 440px" v-model="form.roles" placeholder="请选择角色" multiple>
                    <Option
                        v-for="(item,index) in apiData.roleList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></Option>
                </Select>
            </FormItem>
            <FormItem label="密码" prop="password" :class="[query.id ? '' : 'ivu-form-item-required']">
                <Input clearable  :readonly="isReadOnly" @on-focus="changeType" v-model="form.password" placeholder="请输入密码"
                       type="password" style="width: 440px"></Input>
            </FormItem>
            <FormItem label="确认密码" prop="password_confirmation" :class="[query.id ? '' : 'ivu-form-item-required']">
                <Input clearable  :readonly="isReadOnly" @on-focus="changeType" v-model="form.password_confirmation"
                       placeholder="请输入确认密码" type="password" style="width: 440px"></Input>
            </FormItem>
            <FormItem v-if="!query.id || apiData.detail.is_super != 1" label="分配机构" prop="companys">
                <Select clearable  style="width: 440px" v-model="form.companys" placeholder="请选择分配机构" multiple>
                    <Option
                        v-for="(item,index) in apiData.companyList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></Option>
                </Select>
            </FormItem>
        </Form>
        <Button type="primary" style="width: 90px; margin-right: 20px" @click="submit">保存</Button>
        <Button style="width: 90px" @click="$router.go(-1)">取消</Button>
    </div>
</template>

<script>
import {
    apiAdminList,
    apiAdminAdd,
    apiAdminUpdate,
    apiAdminDetail,
    apiAdminUserCompany
} from '@/api/admin';

export default {
    name: '',
    data() {
        return {
            query: {},
            search: {},
            diyDom: {},
            isReadOnly: true, // 解决表单自动填充
            // 表单数据
            form: {
                email: '',
                name: '',
                password: '',
                status: '1', // 状态
                roles: [],
                password_confirmation: '',
                companys: [] // 分配机构
            },
            diyData: {
                rules: {
                    email: [
                        {
                            required: true,
                            message: '邮箱不能为空',
                            trigger: 'blur'
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: '姓名不能为空',
                            trigger: 'blur'
                        }
                    ],
                    status: [
                        {
                            required: true,
                            message: '状态不能为空',
                            trigger: 'change'
                        }
                    ],
                    roles: [
                        {
                            required: true,
                            message: '请选择角色',
                            type: 'array',
                            trigger: 'change'
                        }
                    ],
                    companys: [
                        {
                            required: true,
                            message: '请分配机构',
                            type: 'array',
                            trigger: 'change'
                        }
                    ]

                }
            },
            apiData: {
                roleList: [],
                companyList: [],
                detail: {}
            }
        };
    },
    methods: {
        // 获取详情
        getDetail() {
            this.$store.commit('setSpinShow', true);
            apiAdminDetail(this.query.id)
                .then(res => {
                    this.apiData.detail = res
                    const { email, name, roles, status,companys } = res;
                    this.form.status = status + '';
                    this.form.email = email;
                    this.form.name = name;
                    this.form.roles = roles.map(item => item.id);
                    this.form.companys = companys.map(item => item.id)
                })
                .finally(() => this.$store.commit('setSpinShow', false));
        },
        // 获取所有角色
        getAllRole() {
            apiAdminList().then(res => {
                const { meta: { roles } } = res;
                this.apiData.roleList = roles;
            });
        },
        // 获取用户的机构
        getUserCompany() {
            apiAdminUserCompany({
                user_id: this.query.id ? this.query.id : ''
            }).then(res => {
                this.apiData.companyList = res.companies;
            });
        },
        // 解决自动填充表单
        changeType() {
            this.isReadOnly = false;
        },
        submit() {
            this.$refs['addForm'].validate(valid => {
                if (valid) {
                    const opt = { ...this.form };
                    if (this.form.password != this.form.password_confirmation)
                        return this.$Modal.warning({
                            title: '提示',
                            content: '两次密码输入不一致!'
                        });
                    if (this.query.id) {
                        if (this.form.password_confirmation == '' && this.form.password == '') {
                            delete opt.password_confirmation;
                            delete opt.password;
                        }
                        apiAdminUpdate(this.query.id, opt).then(res => {
                            this.$Message.success('编辑成功');
                            this.$router.push({
                                name: 'admin-manage'
                            });
                        });
                    } else {
                        apiAdminAdd(opt).then(res => {
                            this.$Message.success('新增成功');
                            this.$router.replace({
                                name: 'admin-manage'
                            });
                        });
                    }
                }
            });
        }
    },
    mounted() {
        this.query = this.$route.query;
        // this.getAllRole();
        // this.getUserCompany();
        this.query.id && this.getDetail();
        if (!this.query.id) {
            this.diyData.rules.password = [
                {
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur'
                }
            ];
            this.diyData.rules.password_confirmation = [
                {
                    required: true,
                    message: '确认密码不能为空',
                    trigger: 'blur'
                }
            ];

        }
    }
};
</script>

<style scoped lang="less">
.add-admin {
    border: 1px solid #ededed;
    margin: 0 20px;
    padding: 26px 20px;

    .title {
        border-left: 5px solid #2d8cf0;
        padding: 0 0 0 10px;
        margin: 0 20px 20px;
        font-weight: bold;
    }

    .look-img {
        display: flex;
        align-items: center;
        width: 100px;
        height: 100px;
        border: 1px dashed rgba(197, 197, 197, 1);
        text-align: center;
        justify-content: space-evenly;
        position: relative;
        overflow: hidden;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
    }

    .look-img:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        line-height: 98px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }
}
</style>
